<template>
	<view>
		<mescroll-body v-if="upOption" :sticky="stickyed" ref="mescrollRef" :height="scrollHeight()" :up="upOption" :safearea="true" :down="downOption"
			@init="mescrollInit" @down="downCallback" @up="loadData">
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-top">
				<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
				<!-- <me-tabs v-model="tabIndex" :tabs="tabs" :tab-width="130"></me-tabs> -->
				<slot name="sticky-top"></slot>
			</view>
			<slot></slot>
			<view :class="dataList.length > 0? contentClass:[]">
				<slot name="content"/>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		props:{
			height: {
				type: [Number, String],
				default: 0
			},
			contentClass: {
				type: Array,
				default: function () {
					return []
				}
			},
			nodataPicIndex: {
				type: Number,
				default: 0
			},
			emptySize: {
				type: Number,
				default: 110
			},
			defaultEmpty: false,
			useEmpty: true,
			emptyTip: '`空空如也`'
		},
		data() {
			return {
				dataList: [],
				upOption: null,
				downOption: {
					auto: false
				},
				stickyed: false
			}
		},
		mounted() {
			const v = this
			let iconType = ['no-data.png', 'no-data2.png', 'no-data3.png','no-data4.png']
			let upOption = {
				textNoMore: '没有更多了',
				toTop: {
					src: ''
				}
			}
			if (!v.defaultEmpty) {
				upOption.empty = {
					use: v.useEmpty,
					fixed: false,
					top: "30%",
					tip: v.emptyTip,
					icon: v.$config.server_pic_url + iconType[v.nodataPicIndex]
				}
			}
			this.upOption = upOption
		},
		methods: {
			scrollHeight(){
				const stickySlot = this.$slots['sticky-top']
				this.stickyed = stickySlot?stickySlot.length>0:false

				const height = this.height
				if (typeof height == 'string') {
					return height
				} else if (typeof height == 'number') {
					return height + 'px'
				}
				return ''
			},
			loadData (page) {
				const v = this;
				v.$util.showLoading('加载中..')
				v.$emit('load-data', {
					pageSize: page.size,
					pageNum: page.num
				}, res => {
					let rows,total
					if (res.hasOwnProperty('data')) {
						rows = res.data.rows
						total = res.data.total
					}else {
						rows = res.rows
						total = res.total
					}
					v.mescroll.endBySize(rows.length, total)
					if(page.num == 1) v.dataList = []
					v.dataList = v.dataList.concat(rows)
					v.$emit('input', v.dataList)
					v.$util.hideLoading()
				}, err=>{
					console.log(err)
					v.mescroll.endErr()
					v.$util.hideLoading()
				});
			},
			dataReload () {
				this.mescroll.resetUpScroll(false)
			},
		}
	}
</script>

<style scoped>
	.sticky-top{
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		background-color: #fff;
	}
</style>
